<!--
 * @Author: Olivia
 * @Date: 2023-02-16 21:36:00
 * @custom_string_Olivia: Less is more
-->
<template>
    <div class="update-name">
        <van-nav-bar title="设置昵称" left-text="取消" right-text="完成" @click-left="$emit('close')" @click-right="onConfirm" />
        <div class="field">
            <van-field v-model.trim="localName" rows="2" type="textarea" maxlength="7" placeholder="请输入昵称"
                show-word-limit />
        </div>
    </div>
</template>
<script>
import { updateName } from '@/api/user'
export default {
    name: 'UpdateName',
    data() {
        return {
            localName: this.value
        }
    },
    props: {
        value: {
            type: String,
            required: true
        }
    },
    created() {
    },
    computed: {
    },
    methods: {
        async onConfirm() {
            try {
                // 如果输入为空，则提示，并返回
                if (!this.localName) {
                    this.$toast('昵称不能为空')
                    return
                }
                this.$toast.loading({
                    messege: '完成中',
                    forbidClick: true,
                    duration: 0 //持续展示toast
                })
                await updateName({
                    name: this.localName || ''
                })
                // 1-更新视图 2-关闭弹出层 3-提示成功
                this.$emit('input', this.localName)
                this.$emit('close')
                this.$toast('修改成功')
            } catch (error) {
                this.$toast('修改昵称失败', error)
            }
        }
    }
}
</script>
<style lang='less'  scoped>
.update-name {
    .field {
        padding: 10px;
    }
}
</style>
